import React, { Component } from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import { Form, Input, Tabs, Button, Icon, Checkbox, Row, Col, Alert } from 'antd';
import Login from 'components/Login';
import styles from './Login.less';
import {USER_HOST, GOS_APPID} from '../../utils/setting';
//const MD5 = require('md5.js');
import b64_sha256 from '../../utils/sha256';
import G from '../../utils/g';

const { Tab, UserName, Password, Mobile, Captcha, Submit } = Login;

const FormItem = Form.Item;

@connect(({ login, loading }) => ({
  login,
  submitting: loading.effects['login/submit'],
}))
@Form.create()

export default class LoginPage extends Component {
  state = {
    type: 'account',
    autoLogin: true,
    verifyPic: `${USER_HOST}/captcha.jpg`,
  };

  componentDidMount = ()=>{

  };

  componentWillReceiveProps(nextProps) {
    if (nextProps.login.status === 'ok') {
      this.props.dispatch(routerRedux.push('/'));
    }
  }

  handleSubmit = (e) => {
    e.preventDefault();
    // const { type } = this.state;
    this.props.form.validateFields({ force: true },
      (err, values) => {
        if (!err) {
          const {password,username} = values;
          // values.password = new MD5().update(`${password}{${username}}`).digest('hex');
          const payload = {
            appid : GOS_APPID,
            clientId : window.localStorage.clientId,
            channel : 'admin',
            grantType : 'password',
            j_username : username,
            j_password : b64_sha256(password + '{' + username + '}')
          };
          // 沿用海苔君前端用户登录体系
          this.props.dispatch({
            type: `login/submit`,
            payload,
          }).then((params)=>{
            console.log(params);
          }).catch(err=>{
            console.log(err);
          });
        }
      }
    );
  };

  refreshVerfiyCode = ()=>{
    this.setState({
      verifyPic: `${USER_HOST}/captcha.jpg?${new Date().getTime()}`
    });
  }

  renderMessage = content => {
    return <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />;
  };

  render() {
    const { form, login, submitting } = this.props;
    const { getFieldDecorator } = form;
    const { type, verifyPic } = this.state;
    return (
      <div className={styles.main}>
        <Form onSubmit={this.handleSubmit}>
          {
            login.status === 'error' &&
            login.type === 'account' &&
            login.submitting === false &&
            this.renderMessage('手机号或密码错误')
          }
          <FormItem>
            {getFieldDecorator('username', {
              rules: [{
                required: type === 'account', message: '请输入手机号！',
                pattern:/^[1][3,4,5,8,7,9][0-9]{9}$/
              }],
            })(
              <Input
                size="large"
                prefix={<Icon type="user" className={styles.prefixIcon} />}
                placeholder="请输入手机号"
              />
            )}
          </FormItem>
          <FormItem>
            {getFieldDecorator('password', {
              rules: [{
                required: type === 'account', message: '请输入密码！',
              }],
            })(
              <Input
                size="large"
                prefix={<Icon type="lock" className={styles.prefixIcon} />}
                type="password"
                placeholder="请输入登录密码"
              />
            )}
          </FormItem>
          {/*
          <FormItem>
            <Row gutter={8}>
              <Col span={16}>
                {getFieldDecorator('captcha', {
                  rules: [{
                    required: true,
                    message: '请输入验证码！'
                  }],
                })(
                  <Input
                    size="large"
                    prefix={<Icon type="mail" className={styles.prefixIcon} />}
                    placeholder="验证码"
                  />
                )}
              </Col>
              <Col span={8}>
                <img src={verifyPic} onClick={this.refreshVerfiyCode} height="40" width="100%" />
              </Col>
            </Row>
          </FormItem>
          */}
          <FormItem className={styles.additional}>
            <Button size="large" loading={submitting} className={styles.submit} type="primary" htmlType="submit">
              登录
            </Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}
